<template>
  <h1>{{ msg }}</h1>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
  <div class="card">
    <el-button type="success"><i-ep-SuccessFilled />Success</el-button>
    <el-button type="info"><i-ep-InfoFilled />Info</el-button>
    <el-button type="warning"><i-ep-WarningFilled />Warning</el-button>
    <el-button type="danger"><i-ep-WarnTriangleFilled />Danger</el-button>
    <el-button type="info"><svg-icon name="bl" />本地svg</el-button>
    <i class="icon-vue3a-Group1301"></i>
    <i class="icon-vue3a-Group1292"></i>
    <el-button type="success">{{ counterStore.counter }}</el-button>
    <el-button @click="counterStore.addCounter" type="danger">点击+</el-button>
    <el-button @click="counterStore.doubleCounter" type="danger"
      >双倍 {{ counterStore.doubleCounter }}</el-button
    >
    <el-button @click="login">登录</el-button>
    <div v-if="counterStore.userInfo.data">获取到的内容：{{ counterStore.userInfo.data.realname }}</div>
  </div>
</template>
<script setup>
import useCounter from "../store/counter";
import { ref } from "vue";

defineProps({
  msg: String,
});

//使用pinia
const counterStore = useCounter();

const loginForm = ref({
  mobile: 18855557777,
  password: 557777,
});

const login = () => {
  counterStore.getLoginInfo(loginForm.value);
};
// const doubleCount = counterStore.doubleCounter;
//修改值
// const addCounter = () => {
//   counterStore.counter++;
// };

const count = ref(0);
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
